<template>
    <!--fetch-suggestions 这个自定义函数这个是下拉函数的-->
    <!--trigger-on-focus 这个的函数是当焦点转移到这个提示框是否开启搜索-->
    <!--trigger-on-focus 停顿多少秒开始提示-->
    <!--@select 自动提示框组件发出的消息，消息的内容是我们选择的条目-->
    <el-autocomplete style="width: 100%;" size="small" placeholder="代码/简称" :fetch-suggestions="querySearchAsync" :trigger-on-focus="false" :debounce=100  @select="updateInput" v-model="state"></el-autocomplete>
</template>

<script>
    export default {
        name: "CodeInput",
        data(){
            return{
                state:''
            }
        },
        methods:{
            //queryString 输入框的值，callback回调函数
            querySearchAsync(queryString,callback){
                let list = [
                    {
                        code:1,
                        name:'平安银行',
                        value:'00001-平安银行'
                    },
                    {
                        code:6000,
                        name:'浦发银行',
                        value:'60000-浦发银行'
                    }
                ]
                //通知提示框显示那几个内容
                callback(list);
            },
            updateInput(item){
                //在vue中 000001会直接转换成为1
                //所以要使用 00000001 ,通过slice 截取6为
                this.state = ("000000"+item.code).slice(-6);
                this.$bus.emit("codeinput-selected",item);
            }
        }
    }
</script>

<style lang="scss">
    .wide-dropdown{
        width: 600px !important;
    }

</style>